<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>JSX的注意</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <button id="btn">Click me</button>
    <div id="root"></div>

    <script type="text/babel">
      const data = ["孙悟空", "猪八戒", "沙和尚"];

      const list = (
        <ul>
          {data.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      );

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(list);

      document.getElementById("btn").addEventListener("click", () => {
        const data = ["唐僧", "孙悟空", "猪八戒", "沙和尚"];

        const list = (
          <ul>
            {data.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        );
        root.render(list);
      });
    </script>
  </body>
</html>
